<template>
	<view class="pages">
		<view class="item u-flex-between u-flex"v-for="(item,index) in Collect_list" :key="index" @click="skip(item)">
			<view class="avatar">
				<image :src="get_src(item.matchmakerMeitu)"></image>
			</view>
			<view  class="u-flex-1" >
				<view class="u-flex u-flex-between item_top">
					<view class="u-flex-y-center">
						<text>{{item.userId}}</text>
						<view class="sex">
							<image :src="`${$http_cos}${item.sex=='男'?'/static/boy':'/static/%E5%A5%B3'}.png`" mode="heightFix"></image>
						</view>
					</view>
					<text>“{{item.descriptiveDescription}}”</text>
				</view>
				<view class="info_introduce">
					<text>
						{{item.title}}
					</text>
				</view>
			</view>
			
		</view>　
		<u-empty
		v-if="Collect_list.length==0"
		textSize='30'
		        mode="data"
				width="200"
				height="200"
				icon="https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/%E6%95%B0%E6%8D%AE%E4%B8%BA%E7%A9%BA.png"
		>
		</u-empty>
	</view>
</template>

<script>
import { getCollect} from '@/common/api.js'
	export default {
		data() {
			return {
				page:1,
				Collect_list:[],
				perPage:10,
				count:0,
			}
		},
		onLoad() {
		this.get_Collect_list()
		},
		onReachBottom() {
			if(Number(this.count)<=(this.page*this.perPage))return
			this.page++;
			this.get_Collect_list()
		},
		methods: {
			skip(item){
				uni.navigateTo({
					url:'/pagesA/square_details/index?id='+item.userId
				})
			},
			get_src(it){
				let {url}=JSON.parse(it)[0]
				return url+'?imageView2/2/w/750/h/q/85'
			},
			 get_Collect_list(){
				 
				 let data = {
				 	params:{
						page: this.page,
						perPage:this.perPage
					}
				 }
				 getCollect(data, {
				 	custom: {
				 		auth: false,
				 		toast: false,
				 		catch: false
				 	}
				 }).then((result) => {
				 	this.Collect_list = [...this.Collect_list, ...result.list]
				 	this.count=result.count
				 	
				 }).catch((err) => {
				 
				 })
			 }
			
		}
	}
</script>

<style lang="scss">
	.pages{
		padding:24rpx;
		box-sizing: border-box;
		.item{
			padding:24rpx 20rpx;
			background-color: #fff;
			border-radius:10rpx;
			margin-bottom:24rpx;
			.avatar{
				width: 184rpx;
				height:232rpx;
				border-radius:10rpx;
				overflow: hidden;
				margin-right: 24rpx;
				// background-color:red;
			}
			.item_top{
				padding:9rpx 5rpx 9rpx 0;
				box-sizing: border-box;
				text{
					font-weight: 400;
					&:first-child{
						font-size:34rpx; ;
						color: #000000;
					}
					&:last-child{
						color: #FF7612;
						font-size: 28rpx;
					}
				}
				.sex{
					width:auto;
					height:28rpx;
					margin-left: 8rpx;
				}
			}
			.info_introduce{
				text{
					line-height:42rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #111111;
					overflow:hidden;
					text-overflow:ellipsis;
					display:-webkit-box;
					-webkit-box-orient:vertical;
					-webkit-line-clamp:4;
					letter-spacing:30;
				}
			}
			
		}
	}
	
	
</style>
